<!--
 * @Author: 菅书繎 2032642089@qq.com
 * @Date: 2025-09-11 08:40:51
 * @LastEditors: 菅书繎 2032642089@qq.com
 * @LastEditTime: 2025-09-17 15:00:58
 * @FilePath: \大三上 前端\city\src\pages\components\Bottom4.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 -->
        <div ref="bottom4" style="height: 150px;margin-top:10px"></div>
    </div>
</template>
<script>
import { Rose } from '@antv/g2plot';
import { get } from '@/utils/request';
import { Mix } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '监控视频',
            fourData:[]

        }
        
},


    methods: {
        zhuPhoto() {
            const plot = new Mix(this.$refs.bottom4, {
                appendPadding: [8, 40, 8, 18],
                syncViewPadding: true,
                meta: {
                    value: { sync: true },
                },
                tooltip: { shared: true, showMarkers: false, showTitle: false },
                plots: [
                    {
                        type: 'funnel',
                        options: {
                            data: this.fourData,
                            yField: 'value',
                            xField: 'type',
                            shape: 'pyramid',
                            conversionTag: false,
                            label: { position: 'right', style: { fill: 'rgba(0,0,0,0.65)' }, offsetX: 10 },
                            funnelStyle: { fillOpacity: 0.85 },
                        },
                    },
                    {
                        type: 'funnel',
                        options: {
                            data: this.fourData,
                            yField: 'value',
                            xField: 'type',
                            shape: 'pyramid',
                            conversionTag: false,
                            label: false,
                            funnelStyle: { lineWidth: 1, stroke: '#fff' },
                        },
                    },
                ],
                interactions: [{ type: 'element-active' }],
            });

            plot.render();

        },
        async getEmpData() {
            let res = await get('/dashboard/queryEngineerBindDeviceNumber');
            console.log(res,'bottom4');
            this.fourData=res.data;
            
        }

    },
    async mounted() {
        await this.getEmpData();
        this.zhuPhoto();

    }

}

</script>
<style lang="less" scoped></style>